// 根组件
import React, { Component } from 'react'
// import Test from './组件创建/cla'
// import Fnc from './组件创建/fn'
// 导入子组件
// import Index from './组件封装'

import { BrowserRouter as Router, Route, Link, Switch, Redirect, withRouter } from 'react-router-dom'
import Login from './pages/login'
import SetData from './pages/setState深入'
import AppUdate from './pages/更新机制-演示'
import LessRender from './pages/性能优化'


/**
 * 配置路由：npm i react-router-dom
 * 1. 导入三个基础组件：BrowserRouter/HashRouter(路由模式)、Route(配置路由)、Link（导航路由）
 * 2. 在根组件使用BrowserRouter包裹整个应用
 * 3. 在BrowserRouter下使用Route组件配置路由
 * 4. 使用Link组件导航路由
 */



//  关于我们二级路由
const AboutTwo = () => {
  return (
    <div>
      <h3>关于我们二级路由页面</h3>
    </div>
  )
}

//  关于我们
const About = function () {
  return (
    <div className="about">
      <h1>关于我们</h1>
      <Link to="/about/test">二级</Link>
      {/* 配置二级路由 */}
      <Route path="/about/test" component={AboutTwo} />
    </div>
  )
}

// 新闻
const News = () => {
  return (
    <div className="news">
      <h1>新闻</h1>
      <Link to="/newsDetail/123/sd">查看新闻</Link>
    </div>
  )
}

// 新闻详情页
class Detail extends Component {
  render () {
    console.log('获取动态路由的参数：', this.props.match.params)
    return (
      <div>
        <h2>新闻详情</h2>
      </div>
    )
  }
}

// 404组件
const NotFound = () => {
  return (
    <div>
      <h1>迷路了吗？</h1>
      <p><Link to="/home">带你回家～</Link></p>
    </div>
  )
}


const Fnc = (props) => {
  console.log(props)
  return (
    <div>
      <h2>函数子组件</h2>
    </div>
  )
}

const NewFnc = withRouter(Fnc)


//  首页
class Home extends Component {
  render () {
    console.log(this.props)
    return (
      <div className="home">
        <h1>首页</h1>
        <button onClick={() => {
          this.props.history.goBack()
        }}>go</button>
        <hr />
        {/* <Fnc {...this.props} /> */}
        <NewFnc />
      </div>
    )
  }
}

// 封装：路由守卫=>配置路由(函数组件)
const Auth = ({ path, component: Com }) => {
  return (
    <Route path={path} render={(props) => {
      const token = localStorage.getItem('token')
      if (token) {
        return <Com {...props} />
      }
      return <Redirect to='/login' />
    }} />
  )
}



// 根组件
function App () {
  return (
    <Router>
      {/* 导航路由 */}
      <div className="nav">
        <Link to="/home">home</Link>
        <Link to="/news">news</Link>
        <Link to="/about">about</Link>
      </div>
      {/* 配置路由 */}
      <Switch>
        {/* 路由的匹配模式=》模糊匹配 */}
        {/* 路由重定向 */}
        <Redirect exact from='/' to='/home' />
        {/* 首页需要登录才能访问 */}
        {/* <Route path="/home" component={Home} /> */}
        <Auth path="/home" component={Home} />
        {/* <Route path="/news" component={News} /> */}
        <Auth path="/news" component={News} />
        <Route path="/about" component={About} />
        <Route path="/setstate" component={SetData} />
        <Route path="/updatecp" component={AppUdate} />
        {/* 登录 */}
        <Route path="/login" component={Login} />
        <Route path="/lessrender" component={LessRender} />
        {/* 动态路由 */}
        <Route path="/newsDetail/:id/:name" component={Detail} />
        {/* 404 */}
        <Route component={NotFound} />
      </Switch>

    </Router>
  )
}

export default App
